<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>照片墙</title>
		<style>
			.q1 {
				width: 2000px;
				position: relative;
			}

			.q1 img {
				 border: 1px solid #ddd;

				background-color: #FFFFFF;
				/* background-origin: padding-box; */
				background-clip: padding-box;
				padding: 20px;
				position: absolute;
				z-index: 1;
			}

			.q1 img:nth-child(1) {
				transform: rotate(-30deg) scale(0.5, 0.5);
			}

			.q1 img:nth-child(2) {
				transform: rotate(30deg) scale(0.5, 0.5);
				top: 20px;
				left: 220px;
			}

			.q1 img:nth-child(3) {
				transform: rotate(-10deg) scale(0.5, 0.5);
				top: 20px;
				left: 400px;
			}

			.q1 img:nth-child(4) {
				transform: rotate(30deg) scale(0.8, 0.8);
				top: 20px;
				left: 700px;
			}

			.q1 img:nth-child(5) {
				transform: rotate(30deg) scale(0.5, 0.5);
				top: 200px;
				left: 50px;
			}

			.q1 img:nth-child(6) {
				transform: rotate(-30deg) scale(0.4, 0.4);
				top: 200px;
				left: 250px;
			}

			.q1 img:nth-child(7) {
				transform: rotate(-20deg) scale(0.5, 0.5);
				top: 200px;
				left: 700px;
			}

			.q1 img:nth-child(8) {
				transform: rotate(10deg) scale(0.8, 0.8);
				top: 200px;
				left: 700px;
			}

			.q1 img:nth-child(9) {
				transform: rotate(-30deg) scale(0.2, 0.2);
				top: 0;
				left: 0px;
			}

			.q1 img:nth-child(10) {
				transform: rotate(30deg) scale(0.5, 0.5);
				top: 300px;
				left: 0px;
			}

			img:hover {
				z-index: 2;
				box-shadow: 5px 5px 5px #ddd;
				transform: rotate(0deg) scale(2, 2);

			}
		</style>
	</head>
	<body>
		<div class="q1" id="a1">
			<img src="../img/7.21/1.jpg" />
			<img src="../img/7.21/2.jpg" />
			<img src="../img/7.21/3.jpg" />
			<img src="../img/7.21/4.jpg" />
			<img src="../img/7.21/5.jpg" />
			<img src="../img/7.21/6.jpg" />
			<img src="../img/7.21/7.jpg" />
			<img src="../img/7.21/8.jpg" />
			<img src="../img/7.21/9.jpg" />
			<img src="../img/7.21/10.jpg" />
		</div>
	</body>
</html>
